<template>
  <div>
    仓库<el-select
      style="width: 140px; margin-left: 10px; margin-right: 10px"
      size="small"
      placeholder="仓库"
    ></el-select>
    商品名称<el-input
      style="width: 140px; margin-left: 10px; margin-right: 10px"
      size="small"
      placeholder="商品名称"
    ></el-input>
    <el-button size="small" type="primary">查询</el-button>
    <el-table
      :data="pageInfo.list"
      style="width: 100%; margin-top: 10px"
      height="400"
      @selection-change="handleSelection"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="imagename" label="图片" width="150">
        <template slot-scope="scope">
          <img
            :src="getImageUrl(scope.row.imagename)"
            width="100px"
            height="100px"
          />
        </template>
      </el-table-column>
      <el-table-column prop="goodcode" label="商品编号" width="120">
      </el-table-column>
      <el-table-column prop="brandName" label="品牌" width="120">
      </el-table-column>
      <el-table-column prop="origin" label="产地" width="120">
      </el-table-column>
      <el-table-column prop="goodname" label="商品名称" width="150">
      </el-table-column>
      <el-table-column prop="categoryName" label="商品类别" width="120">
      </el-table-column>
      <!-- <el-table-column prop="zip" label="属性" width="120">
      </el-table-column> -->
      <el-table-column prop="unitname" label="单位" width="120">
        <!-- <template slot-scope="scope">
          <span v-for="(unit, index) in unitList" :key="index">
            <span v-if="unit.id == scope.row.unitid">{{ unit.unidname }}</span>
          </span>
        </template> -->
      </el-table-column>
      <el-table-column prop="unitid" label="库存基本数量" width="120">
      </el-table-column>
      <!-- <el-table-column prop="zip" label="录入数量" width="120">
      </el-table-column> -->
    </el-table>
    <el-pagination
      style="position: relative; left: 30px"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: ["goodsShow"],
  watch: {
    goodsShow(newVal, oldVal) {
      if (oldVal == false) {
        this.getGoodsPage(1, 10);
      }
    },
  },
  data() {
    return {
      selectionList: [],
      pageInfo: {},
      unitList: [],
      goodsList: [],
    };
  },
  methods: {
    getImageUrl(imagename) {
      // 获取第一个逗号前的字符串
      const filename = imagename.split(",")[0];
      return `http://192.168.152.129:8090/erp/img/${filename}`;
    },
    handleSelection(val) {
      this.selectionList = val.map((row) => {
        // 返回你需要的属性
        return {
          // imagename: row.imagename,
          goodcode: row.goodcode,
          brandName: row.brandName,
          origin: row.origin,
          goodname: row.goodname,
          categoryName: row.categoryName,
          unitname: row.unitname,
          gid: row.id,
          imagename: "",
          weight: "",
          defaultStock: row.defaultStock,
          wId: "",
          ibDetailId: "",
          inBoundId: "",
          unitCost: row.unitCost,
          num: row.num,
          wholeBag: "",
          isEdit: false,
          retailprice: row.retailprice,
          wholesaleprice: row.wholesaleprice,
          vipprice: row.vipprice,
        };
      });
    },
    handleCurrentChange(val) {
      this.getGoodsPage(val, 10);
    },
    getGoodsPage(pageNum, pageSize) {
      this.axios
        .get("/erp/goods/goods/getList", {
          params: {
            pageNum,
            pageSize,
          },
        })
        .then((rs) => {
          this.pageInfo = rs.data.pageInfo;
          this.goodsList = rs.data.pageInfo.list;
          this.getUnitList();
          // console.log(this.pageInfo)
        });
    },
    //获取基本单位
    getUnitList() {
      this.axios.get("/erp/goods/basicUnit/getList").then((rs) => {
        this.unitList = rs.data.list;
        this.pageInfo.list.forEach((goods, index) => {
          // console.log(this.unitList)
          this.unitList.forEach((unit, index) => {
            if (goods.unitid == unit.id) {
              this.$set(goods, "unitname", unit.unidname);
            }
          });
        });
      });
    },
  },
  created() {
    this.getGoodsPage(1, 10);
  },
};
</script>

<style scoped>
/* 合计行整体样式修改开始 */
.el-table /deep/ .el-table__footer-wrapper tbody td {
  background-color: #fff1d4;
}

.el-table /deep/ .el-table__body tr:hover > td {
  background-color: #fff1d4;
}
</style>